<template>
  <a-popover :title="null" trigger="hover" placement="topLeft" :mouseEnterDelay="0.3" :mouseLeaveDelay="0.1">
    <!-- 触发区域 -->
    <template #content>
      <div class="author-hover-card" v-if="authorInfo">
        <a-spin :spinning="loading" size="small">
          <div class="author-header" @click="handleViewProfile">
            <a-avatar :size="48" :src="authorInfo.avatar ? getImageUrl(authorInfo.avatar) : ''" class="author-avatar" :style="{ backgroundColor: authorInfo.avatar ? 'transparent' : '#1890ff' }">
              {{ authorInfo.username?.charAt(0)?.toUpperCase() || 'U' }}
            </a-avatar>
            <div class="author-info">
              <div class="author-name">{{ authorInfo.username }}</div>
              <div class="author-title" v-if="authorInfo.position && authorInfo.company">{{ authorInfo.position }} @ {{ authorInfo.company }}</div>
              <div class="author-title" v-else-if="authorInfo.position">
                {{ authorInfo.position }}
              </div>
              <div class="author-title" v-else-if="authorInfo.company">@ {{ authorInfo.company }}</div>
              <div class="author-career" v-if="authorInfo.career_direction">
                <a-tag size="small" color="blue">{{ authorInfo.career_direction }}</a-tag>
              </div>
            </div>
          </div>

          <!-- 个人介绍 -->
          <div class="author-bio" v-if="authorInfo.bio">
            <p>{{ authorInfo.bio }}</p>
          </div>

          <!-- 兴趣标签 -->
          <div class="author-interests" v-if="authorInfo.interest_tags && authorInfo.interest_tags.length > 0">
            <div class="interests-title">兴趣标签</div>
            <div class="interest-tags">
              <a-tag v-for="tag in authorInfo.interest_tags.slice(0, 4)" :key="tag" size="small" color="geekblue">
                {{ tag }}
              </a-tag>
              <a-tag v-if="authorInfo.interest_tags.length > 4" size="small" color="default"> +{{ authorInfo.interest_tags.length - 4 }} </a-tag>
            </div>
          </div>

          <!-- 底部信息和操作 -->
          <div class="author-footer">
            <span class="join-date"> {{ formatJoinDate(authorInfo.created_at) }}加入 </span>
            <a-button type="link" size="small" @click="handleViewProfile"> 查看主页 </a-button>
          </div>
        </a-spin>
      </div>
      <div v-else-if="error" class="error-message">加载失败</div>
    </template>

    <!-- 作者头像触发区域 -->
    <div class="author-trigger" @mouseenter="loadAuthorInfo">
      <a-avatar :size="size" :src="authorAvatar ? getImageUrl(authorAvatar) : ''" class="author-avatar-trigger" :style="{ backgroundColor: authorAvatar ? 'transparent' : '#1890ff' }">
        {{ authorName?.charAt(0)?.toUpperCase() || 'U' }}
      </a-avatar>
    </div>
  </a-popover>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { getImageUrl } from '@/utils/image'
import { API_BASE_URL } from '@/utils/api'

// Router
const router = useRouter()

// Props
const props = defineProps({
  authorId: {
    type: [String, Number],
    required: true
  },
  authorName: {
    type: String,
    required: true
  },
  authorAvatar: {
    type: String,
    default: ''
  },
  size: {
    type: Number,
    default: 32
  }
})

// 状态
const loading = ref(false)
const authorInfo = ref(null)
const error = ref(false)
const hasLoaded = ref(false)

// 格式化加入日期
const formatJoinDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  return `${year}年${month}月`
}

// 加载作者信息
const loadAuthorInfo = async () => {
  // 如果已经加载过了，就不再重复加载
  if (hasLoaded.value || loading.value) return

  // 检查authorId是否有效
  if (!props.authorId) {
    error.value = true
    console.error('作者ID为空')
    return
  }

  loading.value = true
  error.value = false

  try {
    const response = await fetch(`${API_BASE_URL}/auth/author/${props.authorId}`)
    const result = await response.json()

    if (result.code === 200) {
      authorInfo.value = result.data
      hasLoaded.value = true
    } else {
      error.value = true
      console.error('获取作者信息失败:', result.msg)
    }
  } catch (err) {
    error.value = true
    console.error('网络错误:', err)
  } finally {
    loading.value = false
  }
}

// 跳转到作者主页
const handleViewProfile = () => {
  router.push(`/user/${props.authorId}`)
}
</script>

<style scoped>
.author-trigger {
  display: inline-block;
  cursor: pointer;
}

.author-hover-card {
  width: 320px;
  padding: 16px;
}

.author-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.author-header:hover {
  background-color: #f5f5f5;
}

.author-info {
  flex: 1;
  min-width: 0;
}

.author-name {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  line-height: 1.4;
  margin-bottom: 4px;
}

.author-title {
  font-size: 14px;
  color: #8c8c8c;
  line-height: 1.4;
  margin-bottom: 4px;
}

.author-career {
  margin-top: 6px;
}

.author-bio {
  margin-bottom: 12px;
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
}

.author-bio p {
  margin: 0;
  font-size: 13px;
  color: #595959;
  line-height: 1.5;
  word-break: break-word;
}

.author-interests {
  margin-bottom: 12px;
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
}

.interests-title {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 6px;
  font-weight: 500;
}

.interest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.author-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.join-date {
  font-size: 12px;
  color: #8c8c8c;
}

.error-message {
  padding: 12px;
  text-align: center;
  color: #ff4d4f;
  font-size: 14px;
}

.author-avatar-trigger:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}
</style>
